<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>下载详情页面</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="font/iconfont.css" />
        <link rel="stylesheet" href="css/css.css" />
        <link rel="stylesheet" href="css/layer.css" />

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/sinaEmotion.js"></script>
        <script src="js/layer.js"></script>
        <script src="js/Public.js"></script>

    </head>

    <body>

        <header class="mainbav-bg">
            <div class="container">
                <div class="mainbav-title">
                    <div class="logo-title">
                        <a href="index.html">
                            <img src="images/logo.png" />
                            <div class="logo-title">
                                <h1>前端网</h1>
                                <p>为懒人提供无限可能</p>
                            </div>
                        </a>
                    </div>
                    <div class="qq fr">QQ群：624135994</div>
                </div>
            </div>
            <div class="mainbav-box">
                <div class="container">
                    <div class="mainbav">
                        <ul>
                            <li><a href="index.html">首页</a></li> 
                            <li><a href="WEB.html">前端</a></li>
                            <li><a href="Backstage.html">后台</a></li> 
                            <li><a href="Database.html">数据库</a></li> 
                            <li><a href="UI.html">UI</a></li>
                            <li><a href="Download.html">资源下载</a></li> 
                        </ul>
                    </div>
                    <div class="shortcut_nav" id="menu_nav">
                        <ul>
                            <li>
                                <div class="shortcut_items search">
                                    <span class="icon-sousuo"></span>
                                    <input class="nav_search" type="search" value="" placeholder="输入关键字搜索">
                                </div>
                            </li>
                            <li>
                                <a href="login.html">登录</a>
                            </li>
                            <li>
                                <a href="signup.html">注册</a>
                            </li>
                            <li>
                                <a href="ucenter.html" class="username">小甘</a>
                                <div class="m-tip" style="display: none;">
                                    <i></i>
                                    <div class="m-tip-list">
                                        <a href="#">积分</a>
                                        <a href="#">充值</a>
                                        <a href="#">上传</a>
                                        <a href="#">退出</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

        <div class="container sidebar-top">
            <div class="sidebar-left" id="sidebar">
                <div class="widget-wrap">
                    <h1>分类</h1>
                    <div class="widget">
                        <ul>
                            <li>
                                <a href="#">前端</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">后台</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">数据库</a>
                                <span class="category-list-count">5</span>
                            </li>
                            <li>
                                <a href="#">UI</a>
                                <span class="category-list-count">12</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="widget-wrap">
                    <h1>最新文章</h1>
                    <div class="widget">
                        <ul>
                            <li>
                                <a href="#">前端</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">后台</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">数据库</a>
                                <span class="category-list-count">5</span>
                            </li>
                            <li>
                                <a href="#">UI</a>
                                <span class="category-list-count">12</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="sidebar-right">
                <h1>Web开发</h1>
                <div class="article-single">
                    <h5>从达标到卓越 —— API 设计之道</h5>
                    <p><span>作者: 法海</span><span>发表于: <a>2017-02-16</a></span><span class="icon-chakanmima" style="font-size: 24px;float: right;color: #666;"><a style="font-size: 14px;line-height: 21px;">12</a></span></p>
                    <div class="article-entry tupian">
                        <img src="images/zk1.jpg" />
                        <div class="Download_Details">
                            <a href="" class="btn btn-success thumbile">查看演示</a>
                            <a href="" class="btn btn-danger thumbile">下载(12次)</a>
                        </div>
                        <h2>js结构</h2>
                        <pre><span class="pl-k">import</span> {<span class="pl-smi">createElement</span>, <span class="pl-smi">Component</span>, <span class="pl-smi">render</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>rax<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Text</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>rax-text<span class="pl-pds">'</span></span>;

<span class="pl-k">class</span> <span class="pl-en">Hello</span> <span class="pl-k">extends</span> <span class="pl-e">Component</span> {
  <span class="pl-en">render</span>() {
    <span class="pl-k">return</span> <span class="pl-k">&lt;</span><span class="pl-c1">Text</span> style<span class="pl-k">=</span>{<span class="pl-smi">styles</span>.<span class="pl-c1">title</span>}<span class="pl-k">&gt;</span>Hello {<span class="pl-c1">this</span>.<span class="pl-smi">props</span>.<span class="pl-c1">name</span>}<span class="pl-k">&lt;</span><span class="pl-k">/</span><span class="pl-c1">Text</span><span class="pl-k">&gt;</span>;
  }
}

<span class="pl-k">const</span> <span class="pl-c1">styles</span> <span class="pl-k">=</span> {
  title<span class="pl-k">:</span> {
    color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#ff4400<span class="pl-pds">'</span></span>,
    fontSize<span class="pl-k">:</span> <span class="pl-c1">48</span>,
    fontWeight<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bold<span class="pl-pds">'</span></span>,
  }
};

<span class="pl-en">render</span>(<span class="pl-k">&lt;</span>Hello name<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>world<span class="pl-pds">"</span></span> <span class="pl-k">/</span><span class="pl-k">&gt;</span>);</pre>
                    </div>
                    
                    
                    <!-- 评论 -->
                    <div class="comment" id="comment">
                        <div class="wrap">
                            <div class="head-face">
                                <img src="images/avatar.jpg" alt="头像"/>
                                <!--<p>我是鸟</p>-->
                            </div>
                            <div class="content">
                                <div class="cont-box">
                                    <textarea class="text" placeholder="请输入..."></textarea>
                                </div>
                                <div class="tools-box">
                                    <div class="operator-box-btn"><span class="face-icon">☺</span></div>
                                    <div class="submit-btn"><input type="button" onClick="out()" value="提交评论" /></div>
                                </div>
                            </div>
                            <div id="list">
                                <ul>
                                    <li>
                                        <div class="head-face">
                                            <img src="images/avatar.jpg" alt=""/>
                                        </div>
                                        <div class="reply-cont">
                                            <div class="username-left">
                                                <p class="txt"><span class="username">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。</p>
                                            </div>
                                            <div class="info">
                                                <span class="time">2017-03-24 23:01</span>
                                                <div class="praise" onClick="praise()"><span>回复</span></div>
                                            </div>
                                            <div class="comment-box">
                                                <img class="icon_img" src="images/avatar.jpg" alt="">
                                                <div class="comment-content">
                                                    <p class="txt"><span class="username">老鹰：</span>我也想去三亚。</p>
                                                    <div class="comment-info">
                                                        <span class="time">2017-03-24 23:01</span>
                                                        <div class="praise" onClick="praise()" ><span>回复</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="reg-input-group comment_display" id="recPhone">
                                            <input placeholder="请输入..."/>
                                            <button type="button" class="comment_btn">回复</button>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                            <div class="pagination-center">
                                <ul class="pagination">
                                    <li class="disabled"><a href="#">«</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

 
                </div>
            </div>
        </div>

        <footer class="footer-bg">
            <div class="container">
                <div class="copyright">
                    <p>Copyright © 2017 Taobao FED. All rights reserved.</p>
                    <a href="">版权声明</a>
                </div>
            </div>
        </footer>

        <script src="js/portamento.js"></script>
        <script>
            // 绑定表情
            $('.face-icon').SinaEmotion($('.text'));
            
            // 发布评论
            function out() {
                var inputText = $('.text').val();
                $('#list ul').append(reply(AnalyticEmotion(inputText)));
            }
            
            
            //评论回复
            function praise() {
                if($('#recPhone').css('display') == 'none')  {
                    $('#recPhone').show();
                }  else{
                    $('#recPhone').hide();
                }   
            }
            
            // html
            function reply(content){
                html = '<li>';
                html += '<div class="head-face">';
                html += '<img src="images/avatar.jpg" alt=""/>';
                html += '</div>';
                html += '<div class="reply-cont">';
                html += '<div class="username-left">';
                html += '<div class="txt"><span class="username">Andy：</span>' + content + '</div>';
                html += '</div>';
                html += '<div class="info">';
                html += '<span class="time">2017-03-24 23:01</span>';
                html += '<div class="praise" onClick="praise()" ><span>回复</span></div>';
                html += '</div>';
                html += '<div class="comment-box">';
                html += '<img class="icon_img" src="images/avatar.jpg" alt="">';
                html += '<div class="comment-content">';
                html += '<div class="txt"><span class="username">老鹰：</span>' + content + '</div>';
                html += '<div class="comment-info">';
                html += '<span class="time">2017-03-24 23:01</span>';
                html += '<div class="praise" onClick="praise()" ><span>回复</span></div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="reg-input-group comment_display" id="recPhone">';
                html += '<input class="" placeholder="请输入..."/>';
                html += '<button type="button" class="comment_btn">回复</button>';
                html += '</div>';
                html += '</li>';
                return html;
            }

            

            
        </script>

    </body>

</html>